<template>
  <div class="seach">
    <el-card>
      <el-form ref="form" :model="form" :label-width="labelWidth" :inline="true" @submit.native.prevent>
        <template v-for="(k, index) in formConfig.formItemList">
          <!-- k.label -->
          <el-form-item :label="''" :prop="k.prop || ''" :key="index">
            <template v-if="k.type === 'select'">
              <el-select :placeholder="k.placeholder || ''" v-model="form[k.prop]" style="width: 200px" clearable
                @change="changeSelect($event, k.prop)" @keyup.enter.native="k.callback && k.callback(form, true)">
                <el-option v-for="(opt, j) in k.optList" :key="j" :label="opt.label" :value="opt.value"></el-option>
              </el-select>
            </template>
            <template v-else-if="k.type === 'input'">
              <el-input :placeholder="k.placeholder || ''" v-model="form[k.prop]" style="width: 200px" clearable
                @input="(e) => (form[k.prop] = formateText(e))" v-clear-emoij @change="changeSelect($event, k.prop)"
                @keyup.enter.native="k.callback && k.callback(form, true)"></el-input>
            </template>
            <template v-else-if="k.type === 'searchSelect'">
              <el-select v-model="form[k.prop]" filterable :placeholder="k.placeholder || ''" style="width: 200px"
                clearable @change="changeSelect($event, k.prop)" @clear="clearSelect(index, k.prop)"
                :ref="'searchSelect' + k.prop">
                <el-option v-for="(opt, j) in k.optList" :key="j" :label="opt.label" :value="opt.value">
                </el-option>
              </el-select>
            </template>
            <template v-else-if="k.type === 'textarea'">
              <el-input :placeholder="k.placeholder || ''" v-model="form[k.prop]" style="width: 300px" clearable
                @input="(e) => (form[k.prop] = formateText(e))" type="textarea" v-clear-emoij
                @change="changeSelect($event, k.prop)"
                @keyup.enter.native="k.callback && k.callback(form, true)"></el-input>
            </template>
            <template v-else-if="k.type == 'date'">
              <el-date-picker type="date" :placeholder="k.placeholder || ''" v-model="form[k.prop]" style="width: 200px"
                format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable @change="changeSelect($event, k.prop)">
              </el-date-picker>
            </template>
            <template v-else-if="k.type == 'daterange'">
              <el-date-picker type="daterange" v-model="form[k.prop]" style="width: 400px" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" clearable
                @change="changeSelect($event, k.prop)">
              </el-date-picker>
            </template>
            <template v-else >
              <!-- <div class="btn_list"> -->
              <slot name="button" style="width: 100%;">

              </slot>
              <!-- <div class="btn_item" style="display: inline-block" v-for="(btn, btnIndex) in k.optList" :key="btnIndex"> -->
              <!-- <el-button class="btn_inner btn btn_shadow btn_search" :type="btn.type" style="margin-right: 10px;"  size="small"
                  :class="btn.className" v-if="!btn.hidden" @click="btn.callback(form, true)">
                  {{ btn.text }}</el-button> -->
              <!-- 导入数据 -->
              <!-- <div v-show="btn.type == 'import'" class="upload_content">
                  <el-upload class="upload_btn" action="string" :http-request="(params) => uploadExcel(params, btn, form)"
                    :before-upload="excelBeforeUpload" :on-remove="excelRemove" :show-file-list="false">
                    <el-button class="btn_inner btn btn_shadow btn_search btn_color_1">
                      <i class="el-icon-download btn_icon"></i>{{ btn.text }}</el-button>
                  </el-upload>
                  <span class="btn_tips">{{ btn.tips }}</span>
                </div> -->
              <!-- </div> -->
              <!-- </div> -->
            </template>
          </el-form-item>
        </template>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {

  data() {
    return {
      form: {
        gra_userinfo: {},
        form: {},
        treeData: [],
        defaultCheckedKeys: [], //默认选中
        showCateTree: false,
      },
    }
  },
  props: {
    formConfig: {
      type: Object,
      default: function () {
        return {
          form: {}, //绑定值
          formItemList: [],
        };
      },
    },
    labelWidth: {
      type: String,
      default: () => "",
    },
  },
  created() { },
  mounted() {
    let _this = this;
    _this.form = _this.formConfig.form;
    // console.log(_this.formConfig.formItemList, 123)
  },
  computed: {},
  methods: {
    // 导入
    // uploadExcel(item, btn, form) {
    //   let _this = this;
    //   console.log(item);
    //   console.log(btn);
    //   let formdata = new FormData();
    //   formdata.append("excel", item.file);
    //   // formdata.append("train_id", _this.train_id);
    //   axios
    //     .post(process.env.VUE_APP_BASE_API + btn.url, formdata, {
    //       header: {
    //         "Content-Type": "multipart/form-data",
    //       },
    //     })
    //     .then((res) => {
    //       if (res.status == 200) {
    //         let { data, msg, status } = res.data;
    //         if (status == "1") {
    //           item.onSuccess("导入成功");

    //           _this.$vConfirm.success({
    //             message: msg,
    //             type: "success",
    //             duration: 1000,
    //           });
    //           // btn.callback(form, true)
    //         } else {
    //           _this.$vConfirm.warning({
    //             message: msg,
    //             type: "warning",
    //             duration: 2000,
    //           });
    //           item.onError(msg);
    //         }
    //       } else {
    //         item.onError("请求失败， 请重试");
    //       }
    //     })
    //     .catch((err) => {
    //       _this.$vConfirm.warning({
    //         message: err || "请求失败， 请重试",
    //         type: "warning",
    //         duration: 2000,
    //       });
    //     });
    // },
    excelBeforeUpload(file) {
      let _this = this;
      console.log(file);
    },
    excelRemove(file, fileList) { },
    changeSelect(val, key) {
      this.$emit("changeForm", { val, key });
    },
    changeInput(val, key) {
      console.log(val, key);
      // this.$emit("changeForm", {val, key})
    },
    clearSelect(index, key) {
      console.log(index, key)
      this.form[key] = "";
    }
  },
}
</script>

<style lang="less" scoped>
.seach {
  margin: 10px 0;
}



.el-form {
display: flex;
  .el-form-item {
    margin: 10px 10px 10px 0;

    .el-input {
      .el-input__inner {
        height: 36px !important;
        line-height: 36px !important;
      }
    }

    .el-input__inner {
      height: 36px !important;
      line-height: 36px !important;
    }
  }
  .el-form-item:last-child{
    flex: 1;
    /deep/ .el-form-item__content{
      width: 100%;
    }
  }
}

</style>